/**
 * Created by zzy on 2017/9/10.
 */

import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    Dimensions,
    Platform,
    ListView,
    StatusBar,
    FlatList,
    InteractionManager,
    DeviceEventEmitter
} from 'react-native';

let {width, height} = Dimensions.get('window');
import Toast from 'react-native-easy-toast'
import Icon from 'react-native-vector-icons/Ionicons'
import Constant from '../../js/Contant'
import ShopCell from '../../luojs/componentluo/shopcell'
import AddressTopView from '../../luojs/componentluo/addresstopview';
import NetRequestLuo from '../util/NetRequest'
import {observe} from "../../node_modules/mobx/lib/mobx";
import addressMgrStore from '../../js/store/AddrMgrStore'
import {observable, action, computed} from 'mobx'
import {observer} from 'mobx-react/native'
import waterStationStore from '../store/WaterStationStore'
@observer
export default class WaterStationList extends Component {
    static navigationOptions = {
        header: ()=>{
            return Platform.OS=='ios' ? <StatusBar/> : null
        }
    };
    constructor(props) {
        super(props);
        this.state = {
            dispatchAddr: '获取位置信息...',//送水位置
            coordinate:{
                latitude: 0,
                longitude: 0,
            },
            keywords:'',
        };
        this.pageNum=0;
        this.Size=10;
    }
    componentWillMount(){

    }
    componentDidMount(){
        InteractionManager.runAfterInteractions(()=>{
            // this._nearShops();
        });
        this.addrChangeListener = DeviceEventEmitter.addListener(Constant.CURRENTLOCATIONCHANGE, (poi) => {
            //this._onRefresh();
        });
    }
    componentWillUnmount() {
        if(this.addrChangeListener!=null){
            this.addrChangeListener.remove();
        }
    }

     _nearShops(){
         waterStationStore.getShopList();
     }


    render() {

        return <View style={{flex: 1, backgroundColor: Constant.GRAYBGCOLOR}}>
            <Head callback={()=>{this.props.navigation.navigate('CityChooser')}}/>
            <View style={{height:50}}>
                <TouchableOpacity
                    activeOpacity={0.9}
                    onPress={() => {
                        this.props.navigation.navigate('DeliveryAddress')
                    }}
                    style={{
                        flexDirection: 'row',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        backgroundColor: Constant.GRAYBGCOLOR,
                        height: 50
                    }}>
                    <AddressTopView/>
                </TouchableOpacity>
            </View>
            <FlatList
                onRefresh={this._onRefresh.bind(this)}
                refreshing={waterStationStore.loading}
                onEndReachedThreshold={0.1}
                data={waterStationStore.ShopList}
                keyExtractor={(item,index) => index}
                renderItem={({item}) => <ShopCell shop={item} callback={()=>{
                    this.props.navigation.navigate('WaterStation',{shopId:item.shopId});
                }
                }/>}
            />
        </View>
    }
    _onEndReached(){
        //this._nearShops();
    }
    _onRefresh(){
        //this._nearShops();
        waterStationStore.getShopList();
    }
    componentDidMount() {
        waterStationStore.getShopList();
    }
    }
class Head extends Component{

    render(){
        let {callback}=this.props;
        return <View style={[{flexDirection:'row',alignItems:'center',justifyContent:'center',backgroundColor:'white'},styles.headerStyle]}>

            <TouchableOpacity style={{position:'absolute',left:10,alignItems:'center'}} onPress={callback} activeOpacity={0.9}>
                {/*<View style={{flexDirection:'row'}}>*/}
                    {/*<Text>{addressMgrStore.mapAuto.city}</Text>*/}
                    {/*<Icon name="ios-arrow-down" color="gray" size={14}/>*/}
                {/*</View>*/}
            </TouchableOpacity>
            <Text style={{color:'black',fontSize:18}}>水站</Text>
            {/*<Image style={{width:25,height:25,marginRight:10}} source={require('../../asserts/shop/common_head_icon_share.png')}></Image>*/}
        </View>
    }
}

const styles = {
    wrapper: {
    },
    flex: {
        flex: 1
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold',
    },
    headerStyle:{
        paddingTop:Platform.OS=='ios' ? 30 : 15,
        paddingBottom:Platform.OS=='ios' ? 10 : 15
    }
}
